<template>
  <div class="task-header">
    <div class="task-header-title">工业经济发展竞赛</div>
    <div class="task-header-body">
      <template v-for="(item,index) in ['综合指标','基本指标','附加指标','扣分指标']">
        <el-button type="primary" size="large" :plain="index !== current" @click="setCurrent(index)">{{
            item
          }}
        </el-button>
      </template>
    </div>
  </div>
  <div class="task-group" ref="taskGroup">
    <div class="task-group-item" v-for="(item,index) in taskTotalData">
      <div class="task-group-title">{{ index }}</div>
      <div class="task-header-charts">
        <horizontal-columnar :optionsData="changeCharts(item)"></horizontal-columnar>
      </div>
    </div>
  </div>

  <div class="task-base" ref="taskBase">
    <div class="task-group-label">基本指标</div>
    <div class="task-group-btns">
      <template v-for="(item,index) in basicIndicatorsTitles">
        <el-button :plain="index !== basicCurrent" size="large" type="primary" @click="setBasicCurrent(index)">{{
            item
          }}
        </el-button>
      </template>
    </div>
    <div class="task-header-body">
      <el-row :gutter="20">
        <el-col :span="16">
          <div style="height: 300px;">
            <horzontal-vertical :optionsData="basicIndicatorsDataList"></horzontal-vertical>
          </div>
        </el-col>
        <el-col :span="8">
          <div style="height: 300px;overflow-y: auto">
            <div style="height: 600px">
              <horizontal-columnar :optionsData="basicIndicatorsDataList"></horizontal-columnar>
            </div>
          </div>
        </el-col>
      </el-row>
    </div>
  </div>

  <div class="task-base" ref="addBase">
    <div class="task-group-label">附加指标</div>
    <div class="task-group-btns">
      <template v-for="(item,index) in deductionIndexTitles">
        <el-button :plain="index !== addCurrent" size="large" type="primary" @click="setAddCurrent(index)">{{
            item
          }}
        </el-button>
      </template>
    </div>
    <div class="task-header-body">
      <el-row :gutter="20">
        <el-col :span="16">
          <div style="height: 300px;">
            <horzontal-vertical :optionsData="addIndicatorsDataList"></horzontal-vertical>
          </div>
        </el-col>
        <el-col :span="8">
          <div style="height: 300px;overflow-y: auto">
            <div style="height: 600px">
              <horizontal-columnar :optionsData="addIndicatorsDataList"></horizontal-columnar>
            </div>
          </div>
        </el-col>
      </el-row>
    </div>
  </div>
  <div class="task-base" ref="deeBase">
    <div class="task-group-label">扣分指标</div>
    <div class="task-group-btns">
      <template v-for="(item,index) in additionalIndicatorsTitles">
        <el-button :plain="index !== deeCurrent" size="large" type="primary" @click="setDeeCurrent(index)">{{
            item
          }}
        </el-button>
      </template>
    </div>
    <div class="task-header-body">
      <el-row :gutter="20">
        <el-col :span="16">
          <div style="height: 300px;">
            <horzontal-vertical :optionsData="deductionIndexList"></horzontal-vertical>
          </div>
        </el-col>
        <el-col :span="8">
          <div style="height: 300px;overflow-y: auto">
            <div style="height: 600px">
              <horizontal-columnar :optionsData="deductionIndexList"></horizontal-columnar>
            </div>
          </div>
        </el-col>
      </el-row>
    </div>
  </div>
</template>

<script setup>
import taskTotal from '@/assets/data/taskIndicators/taskTotal.json'
import basicIndicators from '@/assets/data/taskIndicators/basicIndicators.json'
import additionalIndicators from '@/assets/data/taskIndicators/additionalIndicators.json'
import deductionIndex from '@/assets/data/taskIndicators/deductionIndex.json'
import {onMounted, reactive, ref} from 'vue'
import HorizontalColumnar from "@/views/newEcoIndicators/Echarts/horizontalColumnar.vue";
import HorzontalVertical from "@/views/newEcoIndicators/Echarts/horzontalVertical.vue";

const taskGroup = ref(null)
const taskBase = ref(null)
const addBase = ref(null)
const deeBase = ref(null)

//指标按钮组
const taskTotalData = ref(taskTotal)
const current = ref(0)
const setCurrent = (index) => {
  current.value = index
  switch (index) {
    case 0:
      taskGroup.value?.scrollIntoView({behavior: 'smooth'})
      break
    case 1:
      taskBase.value?.scrollIntoView({behavior: 'smooth'})
      break
    case 2:
      addBase.value?.scrollIntoView({behavior: 'smooth'})
      break
    case 3:
      deeBase.value?.scrollIntoView({behavior: 'smooth'})
      break
  }
}

//基本指标
const basicCurrent = ref(0)
const basicIndicatorsData = reactive(basicIndicators)
const basicIndicatorsTitles = basicIndicatorsData.map(item => {
  return item.taskDetailType;
});
const basicIndicatorsDataList = ref({})


//附加指标
const addCurrent = ref(0)
const additionalIndicatorsData = reactive(additionalIndicators)
const additionalIndicatorsTitles = additionalIndicatorsData.map(item => {
  return item.taskDetailType
})
const addIndicatorsDataList = ref([])

//扣分指标 deductionIndex
const deeCurrent = ref(0)
const deductionIndexData = reactive(deductionIndex)
const deductionIndexTitles = deductionIndexData.map(item => {
  return item.taskDetailType
})

const deductionIndexList = ref([])


onMounted(() => {
  setBasicCurrent(0)
  setAddCurrent(0)
  setDeeCurrent(0)
})

const setBasicCurrent = (index) => {
  basicCurrent.value = index
  basicIndicatorsDataList.value = {
    title: basicIndicatorsData[index].taskDetailType,
    lables: basicIndicatorsData[index].child.map(item => {
      return item.deptName
    }),
    values: basicIndicatorsData[index].child.map(item => {
      return item.totalScore
    })
  }
}


const setAddCurrent = (index) => {
  addCurrent.value = index
  addIndicatorsDataList.value = {
    title: additionalIndicatorsData[index].taskDetailType,
    lables: additionalIndicatorsData[index].child.map(item => {
      return item.deptName
    }),
    values: additionalIndicatorsData[index].child.map(item => {
      return item.totalScore
    })
  }
}

const setDeeCurrent = (index) => {
  deeCurrent.value = index
  deductionIndexList.value = {
    title: deductionIndexData[index].taskDetailType,
    lables: deductionIndexData[index].child.map(item => {
      return item.deptName
    }),
    values: deductionIndexData[index].child.map(item => {
      return Math.abs(item.totalScore)
    })
  }
}


const changeCharts = (item) => {
  return {
    title: '',
    lables: item.map(item => {
      return item.deptName
    }),
    values: item.map(item => {
      return item.totalScore
    })
  }
}


</script>

<style scoped lang="scss">
.task-header {
  text-align: left;
  background-color: #ffffff;

  .task-header-title {
    padding: 10px 20px;
    color: #3b77e3;
    font-size: 20px;
    font-weight: bold;
    border-bottom: 1px solid #e0e0e0;
    position: relative;

    &::before {
      position: absolute;
      content: '';
      left: 0;
      bottom: 0;
      width: 200px;
      height: 2px;
      background-color: #3b77e3;
      vertical-align: middle;
      margin-right: 10px;
    }
  }

  .task-header-body {
    padding: 20px;
  }
}

.task-group {
  margin-top: 20px;
  padding: 20px;
  box-sizing: border-box;
  display: flex;
  justify-content: space-between;
  background-color: #ffffff;
  position: relative;

  &::before {
    position: absolute;
    content: '';
    top: 30px;
    left: 2px;
    width: 4px;
    height: 30px;
    background-color: #3b77e3;
  }

  .task-group-item {
    width: 32%;
    height: 100%;
    padding: 20px;
    box-sizing: border-box;
    background-color: #f7f9fe;

    .task-group-title {
      font-size: 18px;
      text-align: left;
    }

    .task-header-charts {
      height: 300px;
    }
  }
}

.task-base {
  margin-top: 20px;
  padding: 20px;
  box-sizing: border-box;
  background-color: #ffffff;
  position: relative;
  text-align: left;

  &::before {
    position: absolute;
    content: '';
    top: 30px;
    left: 2px;
    width: 4px;
    height: 30px;
    background-color: #3b77e3;
  }

  .task-group-label {
    margin-top: 10px;
    font-size: 18px;
    font-weight: bold;
  }

  .task-group-btns {
    margin-top: 10px;
    padding: 20px;
  }


}
</style>
